<template>
  <input v-model="debouncedRef" />
  <p>{{debouncedRef}}</p>
</template>
<script setup>
import { ref, customRef } from "vue";
//ref代表一个引用对象
//它的工作包括二部分，一个是读，一个是写
//当读它的值的时候，会收集依赖,收集完副作用，比如模板更新，当值更新的会通知模板更新
//当赋它的值的时候，会触发更新执行副作用，模板更新
//创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。
//创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：
function useDebouncedRef(value, delay) {
  return customRef((track, trigger) => {
    let timeout;
    return {
      get() {
        //在get方法调用track方法跟踪依赖
        track();
        //console.log("取值时走get");
        return value;
      },
      set(newVal) {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(() => {
          //console.log(`赋值时走set`, newVal);
          value = newVal;
          trigger();
        }, delay);
      },
    };
  });
}
const debouncedRef = useDebouncedRef("hello", 1000);
</script>
